﻿<template>
    <div v-cloak class="flex-column" style="background-color: #F7F7F8; ">
        <component is="style" />
        <div class="flex-column-fill">
            <van-swipe style="height: 100%;" vertical v-on:change="change" :show-indicators="false">
                <van-swipe-item v-for="(item,index) in list">
                    <video ref="video" controls style="width:100%; height:100%; background-color:#555;" webkit-playsinline playsinline x5-video-player-type="h5" preload="none" :src="item.miUrl" :poster="!item.miUrl?null:item.miUrl+'?x-oss-process=video/snapshot,t_100,f_png,m_fast,ar_auto'" v-on:play="playMedia($event)"></video>
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-tabbar v-model="active" :safe-area-inset-bottom="false" :fixed="false">
            <van-tabbar-item v-for="item in urlList" :name="item.id" :icon="item.icon" >{{item.text}}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'video',
            data: function () {
                return {
                    optor: hxt.store.optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    urlList: [],
                    active: 0,
                    list: [],
                };
            },
            computed: {

            },
            activated: function () {

            },
            watch: {
                active: function (val) {
                    var _this = this;
                    _this.list = [];
                    _this.loadList();
                }
            },
            mounted: function () {
                this.loadTitle();
            },
            methods: {
                loadTitle: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoTitle',
                        data: { type: 4 },
                        ok: function (res) {
                            if (res.code != 0) {
                                hxt.error("加载失败：" + res.errmsg);
                                return;
                            }
                            _this.urlList = res.data;
                            var obj = res.data.find(function (item) {
                                return item.isMain == 1
                            });
                            if (obj) {
                                _this.active = obj.id;
                            };
                        }
                    })
                },
                loadList: function () {
                    var _this = this;
                    var obj = _this.urlList.find(function (item) {
                        return item.id == _this.active;
                    });
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoList',
                        data: {
                            miGroupKey: obj.groupKey,
                            pageSize: 100,
                            pageIndex: _this.pageIndex, },
                        ok: function (res) {
                            if (res.code != 0) {
                                hxt.error("加载失败：" + res.errmsg);
                                return;
                            }
                            _this.list = _this.list.concat(res.data.list);
                            _this.$nextTick(function () {
                                this.$refs.video[0].play();
                            })
                        }
                    })
                },
                change: function (idx) {
                    console.log(this.$refs.video[idx])
                    this.$refs.video[idx].play();
                },
                playMedia: function (evt) {
                    var el = evt.currentTarget
                        , videos = $('video');
                    $.each(videos, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                },
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .van-icon-x {
        display: block;
        height: 28px;
        width: 28px;
        text-align: center;
        line-height: 28px !important;
        font-size: 18px !important;
        border-radius: 3px;
    }

    .color-card {
        background-color: #00AA95;
        color: #FFF;
    }

    .color-app {
        background-color: #4B7DFF;
        color: #FFF;
    }

    .bg-mauve {
        background-color: #9c26b0;
        color: #FFF;
    }

    .bg-jxhd {
        background-color: #02995B;
        color: #FFF;
    }
</style>